<!-- 异常告知管理 -->
<template>
  <div class="abnormalInformManagement">
    <!--  ========== (日期选择) ==========  -->
    <div class="operate card">
      <div>
        <el-radio-group v-model="radio_value" @change="radio_change">
          <el-radio-button label="周"></el-radio-button>
          <el-radio-button label="自定义"></el-radio-button>
        </el-radio-group>
      </div>
      <div v-show="radio_value === '周'">
        <el-select @change="weeks_click" style="width:310px" v-model="weeks_value" placeholder>
          <el-option style="text-align: justifytext-align-last: justifywidth:290px" v-for="item in weeks" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
      <div v-show="radio_value === '自定义'">
        <el-tooltip content="查询时间跨度最大为31天" placement="top">
          <el-date-picker style="width:150px" v-model="s_time" :editable="false" :clearable="false" :type="d_type" :format="v_type" :value-format="v_type" :picker-options="pickerOptions" placeholder="选择开始时间"></el-date-picker>
        </el-tooltip>
      </div>
      <div class="hidden-xs-only" v-show="radio_value === '自定义'">
        <i class="el-icon-minus"></i>
      </div>
      <div v-show="radio_value === '自定义'">
        <el-date-picker style="width:150px" v-model="e_time" :editable="false" :clearable="false" :type="d_type" :format="v_type" :value-format="v_type" :picker-options="pickerOptions" placeholder="选择结束时间"></el-date-picker>
      </div>
      <div>
        <el-button type="primary" @click="t_button">查询</el-button>
      </div>
    </div>
    <!--  ========== (重点回路) ==========  -->
    <div class="operate_ operate card">
      <div class="l one_l">
        <div style="font-size:16pxcolor:#333333">重点关注回路:</div>
      </div>
      <div class="one_r">
        <div :class="[{ active: index==active_index },{disabled:disabled}]" :key="index" v-for="(item,index) in top10QueryResultDtos" @click="active_index_click(index,item)">{{item.meterName}}</div>
      </div>
    </div>
    <!--  ========== (其他回路) ==========  -->
    <div class="operate card">
      <div style="font-size:16pxcolor:#333333">查询其他回路:</div>
      <div style="max-width:170px">
        <el-select @change="Transformer_click" v-model="Transformer_value" placeholder="请选择配电室">
          <el-option v-for="(item,index) in Transformer" :key="item.distributionRoomId" :label="item.distributionRoomName" :value="index"></el-option>
        </el-select>
      </div>
      <div style="max-width:170px">
        <el-select @change="loop_click" style="width:300px" v-model="loop_value" placeholder="请选择回路">
          <el-option v-for="(item,index) in loop" :key="item.loopNumber" :label="item.meterName" :value="index"></el-option>
        </el-select>
      </div>
      <div>
        <el-button @click="Transformer_loop_Query" :disabled="Transformer_loop_button_disabled">确定</el-button>
      </div>
    </div>
    <!--  ========== (table) ==========  -->
    <el-row class="card" :gutter="0">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <Mtitle title>
          <p>{{distributionRoomName}} - {{meterName}}</p>
          <p style="color:#0780ed">{{Monday}}</p>
          <p>{{s_e_time}}</p>
        </Mtitle>
        <tb v-loading="table_001_loading" tableTitle="tb_0011" @tb_0011_details="tb_0011_details" :tableData="table_01_data"></tb>
      </el-col>
    </el-row>
    <!--  ========== (详情table)) ==========  -->
    <el-dialog :title="dialog_title" :visible.sync="dialog_01" width="900px">
      <div class="grid">
        <tb v-loading="table_002_loading" height="520" tableTitle="tb_0012" :tableData="table_02_data"></tb>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Mtitle from '@/components/Mtitle'
import getweeks from '@/utils/weeks'
import day from '@/utils/day'
import dayjs from 'dayjs'
import tb from '@/components/table'
import './index.scss'
export default {
  name: 'zhaoxiongfei',
  data() {
    return {
      dialog_title: '',
      // 详情弹出框是否显示
      loading_001: true,
      // 周一提示当前为周一数据为上周数据
      Monday: null,
      // top10是否可点击
      disabled: false,
      // top10数据
      top10QueryResultDtos: [],
      // top10点击切换样式
      active_index: 0,
      // 周、自定义切换
      radio_value: '周',
      // 表格数据
      table_01_data: [],
      // 配电室name
      distributionRoomName: '',
      // 回路name
      meterName: '',
      // 点击详情表格数据
      table_02_data: [],
      // 详情弹框是否显示
      dialog_01: false,
      // 页面显示查询的时间
      s_e_time: '',
      // 页面显示当前周前一周时间
      Endtime_qian: null,
      // 接口参数开始时间
      s_time: '',
      // 接口参数结束时间
      e_time: '',
      // 配电室数据
      Transformer: [],
      // 配电室下拉框选中value
      Transformer_value: null,
      // 回路数据
      loop: [],
      // 回路选中下拉框数据
      loop_value: null,
      // 下拉框查询信息参数
      Transformer_loop_options: {
        distributionRoomId: '',
        distributionRoomName: '',
        loopNumber: '',
        meterName: ''
      },
      // input框选择配电室回路查询按钮
      Transformer_loop_button_disabled: true,
      // 点击查询自定义top10数据
      zidingyi_top10_data: [],
      // 点击查询自定义周数据
      weeks_top10_data: [],
      // 周数据默认选中value
      weeks_value: null,
      //  周数据长度
      weeks_length: null,
      // 周数据
      weeks: [],
      // 周index
      weeks_value_002: null,
      // 自定义开始时间
      s_time_zidingyi: null,
      // 自定义结束时间
      e_time_zidingyi: null,
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== (详情表格loading) ==========
      table_002_loading: true,
      // ========== (表格1loading) ==========
      table_001_loading: true,
      // ========== (日期) ==========
      d_type: "date",
      v_type: "yyyy-MM-dd",
      Starttime: "",
      etime: "",
      Endtime: "",
      // 日月年
      t_value: 1,
      options_t_type: [
        {
          value: 1,
          label: "日"
        },
        {
          value: 2,
          label: "月"
        },
        {
          value: 3,
          label: "年"
        }
      ],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },

    }
  },
  watch: {
    // 监听自定义开始时间
    Starttime(a, b) {
      if (b !== null) {
        this.s_time = a
        if (this.e_time_zidingyi === this.e_time && this.s_time_zidingyi === this.s_time) {
          this.top10QueryResultDtos = this.zidingyi_top10_data
        } else {
          this.top10QueryResultDtos = []
        }
      }
    },
    // 监听自定义结束时间
    Endtime(a, b) {
      if (b !== null) {
        this.e_time = a
        if (this.e_time_zidingyi === this.e_time && this.s_time_zidingyi === this.s_time) {
          this.top10QueryResultDtos = this.zidingyi_top10_data
        } else {
          this.top10QueryResultDtos = []
        }
      }
    }
  },
  created() {
    // 初始化默认时间
    this.s_e = day.init_value(this.d_type)
    this.Starttime = this.s_e.s
    this.Endtime = this.s_e.e
    // 当前年月日
    this.Endtime_qian = dayjs().format('YYYY-MM-DD')
    // 获取周数据
    this.weeks = getweeks(dayjs().format('YYYY'))
    // 获取周数据的总长度
    this.weeks_length = this.weeks.length
    // 默认选中周数据最后一条当前周
    this.weeks_value = this.weeks[this.weeks_length - 1].id

    if (this.Endtime_qian === this.weeks[this.weeks_length - 1].s) {
      this.Monday = '今天是周一 查询区间为上周'
      this.s_e_time = this.weeks[this.weeks_length - 2].name
      this.s_time = this.weeks[this.weeks_length - 2].s
      this.e_time = this.weeks[this.weeks_length - 2].e
    } else {
      this.Monday = null
      this.s_e_time = this.weeks[this.weeks_length - 1].name
      this.s_time = this.weeks[this.weeks_length - 1].s
      this.e_time = this.weeks[this.weeks_length - 1].e
    }

    // 查询异常告知重点关注回路前top10
    this.queryTop10ByAssignedCondition(1)
    // this.查询指定企业下的配电室信息
    this.queryDistributionRooms()
  },
  methods: {
    // 点击查询
    t_button() {
      day
        .s_e(this.s_time, this.e_time, 2)
        .then(() => {
          // 查询异常告知重点关注回路前top10
          this.queryTop10ByAssignedCondition(2)
          // this.查询指定企业下的配电室信息
          this.queryDistributionRooms()
        })
        .catch(() => { })
    },
    // 周自定义切换事件
    radio_change(p) {
      this.loop_value = null
      this.Transformer_value = null
      this.loop = []
      this.Transformer_loop_button_disabled = true
      this.active_index = 0
      if (p === '周') {
        this.weeks_value = this.weeks_value_002
        this.s_time = this.weeks[this.weeks_value_002 - 1].s
        this.e_time = this.weeks[this.weeks_value_002 - 1].e
        this.top10QueryResultDtos = this.weeks_top10_data
      }
      if (p === '自定义') {
        this.s_time = this.Starttime
        this.e_time = this.Endtime
        this.top10QueryResultDtos = this.zidingyi_top10_data
      }
    },
    // 周下拉框选择触发事件
    weeks_click(p) {
      this.active_index = 0
      if (this.Endtime_qian === this.weeks[p - 1].s) {
        this.s_time = this.weeks[p - 2].s
        this.e_time = this.weeks[p - 2].e
      } else {
        this.s_time = this.weeks[p - 1].s
        this.e_time = this.weeks[p - 1].e
      }
      if (this.weeks_value_002 === p) {
        this.top10QueryResultDtos = this.weeks_top10_data
      } else {
        this.top10QueryResultDtos = []
      }
    },
    tb_0011_details(p) {
      this.dialog_title = this.distributionRoomName + ' - ' + this.meterName + ' - ' + p.metricName + ' - 告知详情'
      this.dialog_01 = true
      this.table_002_loading = true
      // 查询指定回路下指定采集点的短信告知信息
      this.queryExceptionNoticeSmsByAssignedMetric(p)
    },
    // // 详情弹出框点击事件
    // dialog_01_show(p) {
    //   this.dialog_title = this.distributionRoomName + ' - ' + this.meterName + ' - ' + p.metricName + ' - 告知详情'
    //   this.dialog_01 = true
    //   this.table_002_loading = true
    //   // 查询指定回路下指定采集点的短信告知信息
    //   this.queryExceptionNoticeSmsByAssignedMetric(p)
    // },
    // 查询其他回路  配电室下拉框选择事件
    Transformer_click(i) {
      this.Transformer_loop_options.distributionRoomId = this.Transformer[i].distributionRoomId
      this.Transformer_loop_options.distributionRoomName = this.Transformer[i].distributionRoomName
      // 查询指定配电室下的回路信息
      this.queryDistributionMeters(this.Transformer[i].distributionRoomId)
    },
    // 查询其他回路  回路下拉框选择事件
    loop_click(i) {
      this.Transformer_loop_options.loopNumber = this.loop[i].loopNumber
      this.Transformer_loop_options.meterName = this.loop[i].meterName
      this.Transformer_loop_button_disabled = false
    },
    // 查询其他回路  点击查询按钮触发事件
    Transformer_loop_Query() {
      this.queryExceptionNoticeConsumeDetail(this.Transformer_loop_options, 1)
    },
    // 重点关注回路点击触发事件
    active_index_click(i, p) {
      this.active_index = i
      this.queryExceptionNoticeConsumeDetail(p, 2)
    },
    // 查询指定回路下的异常告知信息
    queryExceptionNoticeConsumeDetail(p, n) {
      this.table_001_loading = true
      this.$axios
        .post(this.Eelec + "/web/notice/queryExceptionNoticeConsumeDetail", {
          custId: sessionStorage.getItem("custId"),
          startTime: this.s_time,
          endTime: this.e_time,
          distributionRoomId: p.distributionRoomId,
          distributionRoomName: p.distributionRoomName,
          loopNumber: n === 1 ? p.loopNumber : p.meterNo,
          meterName: p.meterName,
        })
        .then(res => {
          this.table_001_loading = false
          this.Monday = null
          if (this.radio_value === '周') {
            if (this.Endtime_qian === this.weeks[this.weeks_value_002 - 1].s) {
              this.Monday = '今天是周一 查询区间为上周'
              this.s_e_time = this.weeks[this.weeks_length - 2].name
              this.s_time = this.weeks[this.weeks_length - 2].s
              this.e_time = this.weeks[this.weeks_length - 2].e
            } else {
              this.Monday = null
              this.s_e_time = this.weeks[this.weeks_value_002 - 1].name
              this.s_time = this.weeks[this.weeks_value_002 - 1].s
              this.e_time = this.weeks[this.weeks_value_002 - 1].e
            }
          } else {
            this.s_e_time = this.s_time + ' ~ ' + this.e_time + ' (自定义) '
          }
          if (res.data.code === 200) {
            this.distributionRoomName = res.data.data.distributionRoomName
            this.meterName = res.data.data.meterName
            if (res.data.data.queryResultDtos.length) {
              this.table_01_data = res.data.data.queryResultDtos
              if (n === 1) {
                this.active_index = null
              } else {
                this.loop_value = null
                this.Transformer_value = null
                this.loop = []
                this.Transformer_loop_button_disabled = true
              }
            } else {
              this.table_01_data = []
            }
          } else {
            this.table_01_data = []
          }
        })
    },
    // 查询异常告知重点关注回路前top10
    queryTop10ByAssignedCondition(n) {
      this.table_001_loading = true
      this.$axios
        .post(this.Eelec + "/web/notice/queryTop10ByAssignedCondition", {
          custId: sessionStorage.getItem("custId"),
          startTime: this.s_time,
          endTime: this.e_time,
        })
        .then(res => {
          this.table_001_loading = false
          this.loading_001 = false
          this.weeks_value_002 = this.weeks_value
          this.Monday = null
          if (this.radio_value === '周') {
            if (this.Endtime_qian === this.weeks[this.weeks_value_002 - 1].s) {
              this.Monday = '今天是周一 查询区间为上周'
              this.s_e_time = this.weeks[this.weeks_length - 2].name
              this.s_time = this.weeks[this.weeks_length - 2].s
              this.e_time = this.weeks[this.weeks_length - 2].e
            } else {
              this.Monday = null
              this.s_e_time = this.weeks[this.weeks_value_002 - 1].name
              this.s_time = this.weeks[this.weeks_value_002 - 1].s
              this.e_time = this.weeks[this.weeks_value_002 - 1].e
            }
          } else {
            this.s_e_time = this.s_time + ' ~ ' + this.e_time + ' (自定义) '
          }
          if (res.data.code === 200) {
            this.loop_value = null
            this.Transformer_value = null
            this.loop = []
            this.Transformer_loop_button_disabled = true
            if (res.data.data) {
              if (res.data.data.top10QueryResultDtos.length) {
                if (n === 2) {
                  this.active_index = 0
                }
                if (this.radio_value === '周') {
                  this.weeks_value_002 = this.weeks_value
                  this.weeks_top10_data = res.data.data.top10QueryResultDtos
                }
                if (this.radio_value === '自定义') {
                  this.s_time_zidingyi = this.s_time
                  this.e_time_zidingyi = this.e_time
                  this.zidingyi_top10_data = res.data.data.top10QueryResultDtos
                }
                this.top10QueryResultDtos = res.data.data.top10QueryResultDtos

              } else {
                this.top10QueryResultDtos = []
              }
              if (res.data.data.detailResultDtos !== null && res.data.data.detailResultDtos.queryResultDtos.length) {
                this.table_01_data = res.data.data.detailResultDtos.queryResultDtos
                this.distributionRoomName = res.data.data.detailResultDtos.distributionRoomName
                this.meterName = res.data.data.detailResultDtos.meterName
              }
              else {
                this.table_01_data = []
                this.distributionRoomName = null
                this.meterName = null
              }
            }
          } else {
            // this.top10QueryResultDtos = []
            // this.table_01_data = []
            // this.distributionRoomName = null
            // this.meterName = null
          }
        })
    },
    // 查询指定回路下指定采集点的短信告知信息
    queryExceptionNoticeSmsByAssignedMetric(p) {
      this.$axios
        .post(this.Eelec + "/web/notice/queryExceptionNoticeSmsByAssignedMetric", {
          custId: sessionStorage.getItem("custId"),
          startTime: p.startTime.substr(0, 10),
          endTime: p.endTime.substr(0, 10),
          metric: p.metric,
          loopNumber: p.loopNumber
        })
        .then(res => {
          this.table_002_loading = false
          if (res.data.code === 200) {
            if (res.data.data.length) {
              this.table_02_data = res.data.data
            } else {

              this.table_02_data = []
            }
          } else {
            this.table_02_data = []

          }
        })
    },
    //查询指定企业下的配电室信息
    queryDistributionRooms() {
      var fd = new FormData()
      fd.append("custId", sessionStorage.getItem("custId"))
      this.$axios
        .post(this.Eelec + "/web/notice/queryDistributionRooms", fd)
        .then(res => {
          if (res.data.code === 200) {
            if (res.data.data.length) {
              this.Transformer = res.data.data
            } else {
              this.Transformer = []
            }
          } else {
            this.Transformer = []
          }
        })
    },
    // 查询指定配电室下的回路信息
    queryDistributionMeters(p) {
      var fd = new FormData()
      fd.append("distributionRoomId", p)
      this.$axios
        .post(this.Eelec + "/web/notice/queryDistributionMeters", fd)
        .then(res => {
          if (res.data.code === 200) {
            if (res.data.data.length) {
              this.loop = res.data.data
            } else {
              this.loop = []
            }
          } else {
            this.loop = []
          }
        })
    },
  },
  mounted() { },
  components: {
    Mtitle,
    tb
  },
}

</script>

<style lang='' scoped>
</style>